<template>
  <div>
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">


      <el-form-item label="车场名称" prop="chid">
        <el-select v-model="formData.chid" placeholder="请选择车场名称" @visible-change="clearCarshomeboothList"
                   :disabled="disabled"
                   clearable :style="{width: '100%'}">
          <el-option
            v-for="item in this.carshomeList"
            :key="item.chid"
            :label="item.chname"
            :value="item.chid">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="岗亭名称" prop="chbid">
        <el-select v-model="formData.chbid" placeholder="请选择岗亭名称" @visible-change="getListBooth" clearable
                   :disabled="disabled"
                   :style="{width: '100%'}">
          <el-option
            v-for="item in this.carshomeboothList"
            :key="item.chbid"
            :label="item.boothname"
            :value="item.chbid">
          </el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="车道编号" prop="lanecode">
        <el-input v-model="formData.lanecode" placeholder="请输入车道编号" clearable :style="{width: '100%'}"
                  :disabled="disabled">
        </el-input>
      </el-form-item>
      <el-form-item label="车道名称" prop="lanename">
        <el-input v-model="formData.lanename" placeholder="请输入车道名称" clearable :style="{width: '100%'}"
                  :disabled="disabled">
        </el-input>
      </el-form-item>

      <el-form-item label="车道类型" prop="lanetype">
        <el-select v-model="formData.lanetype" placeholder="请选择车道类型" clearable :style="{width: '100%'}"
                   :disabled="disabled">
          <el-option label="入口" :value=0></el-option>
          <el-option label="出口" :value=1></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="是否收费" prop="toll">
        <el-select v-model="formData.toll" placeholder="请选择是否收费" clearable :style="{width: '100%'}"
                   :disabled="disabled">
          <el-option label="收费" :value=0></el-option>
          <el-option label="免费" :value=1></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="车位屏" prop="screen">
        <el-select v-model="formData.screen" placeholder="请选择车位屏" clearable :style="{width: '100%'}"
                   :disabled="disabled">
          <el-option label="LED" :value=0></el-option>
          <el-option label="液晶" :value=1></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="通行车型" prop="cartype">
        <el-select v-model="formData.cartype" placeholder="请选择通行车型" clearable :style="{width: '100%'}"
                   :disabled="disabled">
          <el-option label="机动车" :value=0></el-option>
          <el-option label="非机动车" :value=1></el-option>
        </el-select>
      </el-form-item>


      <el-form-item label="时间范围" prop="time">
        <el-time-picker v-model="time" is-range format="HH:mm:ss" value-format="HH:mm:ss" type="date"
                        :style="{width: '100%'}" start-placeholder="开始时间" end-placeholder="结束时间"
                        range-separator="至"
                        clearable :disabled="disabled"></el-time-picker>
      </el-form-item>

      <el-form-item size="large">
        <el-button type="primary" @click="submitForm" :disabled="disabled">提交</el-button>
        <el-button @click="resetForm" :disabled="disabled">重置</el-button>
        <el-button @click="goback">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {listHome} from "@/api/modules/sys-cars-home/home";
import {listBooth} from "@/api/modules/sys-cars-home/booth/booth";
import {addLane, getLane, updateLane} from "@/api/modules/sys-cars-home/lane/lane";

export default {
  components: {},
  props: [],
  data() {
    return {
      // 车场管理表格数据
      carshomeList: [],
      //岗亭数据
      carshomeboothList: [],
//隐藏
      disabled: false,
      queryParams: {
        chid: null
      },
      formData: {
        chid: undefined,

        chlid: undefined,
        chbid: undefined,
        lanecode: undefined,
        lanename: undefined,
        lanetype: undefined,
        toll: 0,
        screen: undefined,
        cartype: undefined,

        begintime: undefined,
        endtime: undefined,
      },
      time: ["04:20:00", "18:00:00"],
      rules: {
        chid: [{
          required: true,
          message: '请选择车场名称',
          trigger: 'change'
        }],
        chbid: [{
          required: true,
          message: '请选择岗亭名称',
          trigger: 'change'
        }],
        lanecode: [{
          required: true,
          message: '请输入车道编号',
          trigger: 'blur'
        }],
        lanename: [{
          required: true,
          message: '请输入车道名称',
          trigger: 'blur'
        }],
        lanetype: [{
          required: true,
          message: '请选择车道类型',
          trigger: 'change'
        }],

        screen: [{
          required: true,
          message: '请选择车位屏',
          trigger: 'change'
        }],
        cartype: [{
          required: true,
          message: '请选择通行车型',
          trigger: 'change'
        }],
        // time: [{
        //   required: true,
        //   type: 'array',
        //   message: '请至少选择一个field112',
        //   trigger: 'change'
        // }],
      },



      //




    }
  },
  computed: {},
  watch: {},
  created() {

    this.listen()
    this.getListCars()
    this.getListBooth()


  },
  mounted() {
  },
  methods: {

    listen() {
      if (this.$route.query.operate == "修改") {
        getLane(this.$route.query.chlid).then(response => {
          this.formData = response.data;
          console.log(this.formData)
          this.formData.chid = response.data.carsHome.chid
          this.time[0] = response.data.begintime
          this.time[1] = response.data.endtime
        });
      } else if (this.$route.query.operate == "新增") {

      } else if(this.$route.query.operate == "查看"){
        this.disabled = true
        getLane(this.$route.query.chlid).then(response => {
          this.formData = response.data;
          console.log(this.formData)
          this.formData.chid = response.data.carsHome.chid
          this.time[0] = response.data.begintime
          this.time[1] = response.data.endtime
        });
      }
    },

    /** 查询车场列表 */
    getListCars() {
      listHome(this.formData).then(response => {
        this.carshomeList = response.rows;
      });
    },


    /** 查询岗亭列表 */
    getListBooth() {
      listBooth(this.formData).then(response => {
        this.carshomeboothList = response.rows;
      });
    },

    //清除岗亭
    clearCarshomeboothList() {
      // this.queryParams.chid = this.formData.chid
      this.formData.chbid = null
    },


    // submitForm() {
    //   this.$refs['elForm'].validate(valid => {
    //     if (valid) {
    //
    //       this.formData.begintime = this.getDateTime(this.formData.time[0])
    //       this.formData.endtime = this.getDateTime(this.formData.time[1])
    //       console.log(this.formData)
    //       addLane(this.formData).then(res=>{
    //         alert("ok")
    //       })
    //       //   addLane(this.formData).then()
    //       //
    //       // }
    //       // TODO 提交表单
    //     }
    //   })
    // },


    getDateTime(str) {
      var timeString = str
      var timeParts = timeString.split(":");
      var hours = parseInt(timeParts[0]);
      var minutes = parseInt(timeParts[1]);
      var seconds = parseInt(timeParts[2]);
      var date = new Date();
      date.setHours(hours);
      date.setMinutes(minutes);
      date.setSeconds(seconds);
      return date
    },


    /** 提交按钮 */
    submitForm() {
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          if (this.formData.chlid != null) {
            console.log("修改成功")
            updateLane(this.formData).then(response => {
              this.$modal.msgSuccess("修改成功");
            });
          } else {
            this.formData.begintime = this.time[0]
            this.formData.endtime = this.time[1]
            addLane(this.formData).then(response => {
              this.$modal.msgSuccess("新增成功");
            });
          }
          this.goback();
        }
      });
    },


    goback() {
      this.$store.dispatch('tagsView/delAllViews',this.$router);
      this.$router.push("lane")
    },


    resetForm() {
      this.$refs['elForm'].resetFields()
    },
  }
}

</script>
<style>
</style>
